<!-- Things like #firstName="ngForm" will change to #firstName="ngModel" after RC2 -->
<div>
  <form (ngSubmit)="onSubmit()" #customerForm="ngForm" class="editForm">
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="firstName" [(ngModel)]="customer.firstName" #firstName="ngModel" required>
      <div class="alert alert-danger" [hidden]="firstName.valid">First Name is required</div>
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" class="form-control" name="lastName" [(ngModel)]="customer.lastName" #lastName="ngModel" required>
      <div class="alert alert-danger" [hidden]="lastName.valid">Last Name is required</div>
    </div>
    <div class="form-group">
      <label>Address</label>
      <input type="text" class="form-control" name="address" [(ngModel)]="customer.address" #address="ngModel" required>
      <div class="alert alert-danger" [hidden]="address.valid">Address is required</div>
    </div>
    <div class="form-group">
      <label>City</label>
      <input type="text" class="form-control" name="city" [(ngModel)]="customer.city" #city="ngModel" required>
      <div class="alert alert-danger" [hidden]="city.valid">City is required</div>
    </div>
    <div class="form-group">
      <label>State</label>
      <select class="form-control" 
              [(ngModel)]="customer.state.abbreviation"
              name="state" 
              required>
          <option *ngFor="let state of states" [ngValue]="state.abbreviation">{{state.name}}</option>
      </select>
    </div>
    <button class="btn btn-default" (click)="onCancel($event)">Cancel</button>&nbsp;&nbsp;
    <button type="submit" class="btn btn-success" [disabled]="!customerForm.valid">Update</button>
    <div class="alert alert-danger" *ngIf="errorMessage != null">{{ errorMessage }}</div>
  </form>
</div>